<template>

  <view v-if="loading"> <!-- 判断是否正在处于加载状态-->
    <loading1></loading1> <!-- 加载动画 -->
  </view>

  <view v-else>
    <!-- <u-navbar :is-back="true" title="动态详情"></u-navbar> -->

    <view class="warp">
      <kgDynamics :dyInfo="dyInfo" :isInfo="true" @comContent="comContent" @comLikes="comLikes"></kgDynamics>
      <view class="fenge">
<!--        <u-text> title="评论内容" :arrow="false" :color="bgColor" :sub-title="dyInfo.comList.length + '条评论'"></u-text> -->
        <!-- <u--im src="../../static/commentIcon.png"><img> -->
        <!-- <u--image :src="../../static/commentIcon.png"></u--image> -->
        <image class="commentIcon" src="../../static/commentIcon.png"/>
        <text style="margin-right: 5vw;margin-top: 1vw;">共{{dyInfo.commentCount}}条评论</text>
      </view>
      <kgComment :commentList="dyInfo.comList" @delCom="delCom()" @replyContent="replyContent" @replyLike="replyLike">
      </kgComment>
      <u-popup :show="comShow" @close="closeComment" mode="bottom" border-radius="14"> <!--v-model="comShow" -->
        <view class="bodys">
          <u-form :model="comModal" :rules="rules" ref="comForm" :errorType="errorType"> <!--  -->
            <u-form-item :border-bottom="false" prop="comInfo">
              <u-input v-model="comModal.comInfo" type="textarea" placeholder="请输入评论内容~" :border="border"
                :border-color="borderColor" :height="height" :auto-height="autoHeight" />
            </u-form-item>
          </u-form>
          <!--          <view class="cardZw">
            上传照片
          </view>
          <u-upload :custom-btn="true" max-count="4" ref="uUpload" :action="action" :file-list="comModal.comImgs"
            :auto-upload="true">
            <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
              <image src="../../static/icon/upload.png"></image>
            </view>
          </u-upload> -->

          <view class="bodys_btn">
            <u-button :custom-style="customStyles" :ripple="true" @click="saveComInfo()"
              ripple-bg-color="#ff9b01">评论</u-button>
          </view>
        </view>
      </u-popup>

      <u-popup :show="repShow" @close="closeComment" border-radius="14"> <!-- mode="bottom" -->
        <view class="bodys">
          <u-form :model="repModal" :rules="rules" ref="repForm"> <!-- :errorType="errorType" -->
            <u-form-item :border-bottom="false" prop="replyInfo">
              <u-input v-model="repModal.replyInfo" type="textarea" placeholder="请输入回复内容~" :border="border"
                :border-color="borderColor" :height="height" :auto-height="autoHeight" />
            </u-form-item>
          </u-form>
          <view class="bodys_btn">
            <u-button :custom-style="customStyles" :ripple="true" @click="saveReplyInfo()"
              ripple-bg-color="#ff9b01">回复</u-button>
          </view>
        </view>
      </u-popup>
    </view>


  </view>
</template>

<script>
  import kgComment from "../../components/kg-com/kg-comment"
  import kgDynamics from "../../components/kg-dy/kg-dynamic"
  import loading1 from "../../components/kg-loading/loading1.vue"
  export default {
    components: {
      kgComment,
      kgDynamics,
      loading1
    },
    created() {
      console.log('执行created');
    },
    onLoad(option) { //参数从其他页面传递过来
      console.log('执行onLoad方法');
      console.log(option.articleId);
      this.articleId = option.articleId;
      //通过文章id查询文章信息以及评论信息,并且根据userId查询用户头像信息
      this.getArticle();
      this.getComments();
    },
    onShow() {
      console.log('执行onshow');
    },
    data() {
      return {
        loading: true,
        customStyles: {
          marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
          backgroundColor: '#ffcc01',
          boxShadow: '0 0 0px #ffcc01',
        },
        dyId: null,
        loading: true,
        background: '',

        articleId: 0, //my
        article: {},
        comments: [],

        dyInfo: {
          id: 1,
          type: 1,
          avatarUrl: '',
          userName: '用户名',
          pushTime: '',
          content: '',
          dyImgs: [
            // 'https://img0.baidu.com/it/u=155276595,173864794&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
          ],
          fabulous: false, //有没有点赞 (只能点一次)
          dyLike: 10,
          comList: [],
          commentCount : 0,
          userId : 0
        },
        bgColor: '#ffcc01',
        baseUrl: '',
        comModal: {
          userId: null, //用户id
          dyId: null, // 文章id
          comInfo: '', //评论信息
          comImgs: [], //评论图片,不用
        },
        repModal: {
          userId: null,
          dyId: null,
          comId: null, //父级评论信息
          replyInfo: '',
        },
        comment: {
          content: '',
          userId: 0,
          articleId: 0,
          parentCommentId: -1
        },
        comShow: false,
        repShow: false,
        action: '',
        rules: {
          comInfo: [{
              required: true,
              message: '请填写评论信息'
            },
            {
              min: 1,
              message: '评论信息不能少于1个字',
              trigger: 'change',
            },
          ],
          replyInfo: [{
              required: true,
              message: '请填写评论信息'
            },
            {
              min: 1,
              message: '评论信息不能少于1个字',
              trigger: 'change',
            },
          ],
        },
        errorType: ['toast'],
        border: true,
        height: 300,
        autoHeight: true,
        borderColor: '#000000',
      }
    },
    methods: {
      closeComment() { //关闭评论弹窗
        this.comShow = false;
        this.repShow = false;
      },
      saveComInfo() { //发送回复请求,此时为根节点
        //1 设置参数
        console.log(this.comModal);
        this.comShow = false;
        this.comment.userId = this.comModal.userId;
        this.comment.articleId = this.comModal.dyId;
        this.comment.content = this.comModal.comInfo;
        this.comment.parentCommentId = -1;

        //2 发送请求
        this.addComment();

        //3 清除comment
      },
      saveReplyInfo() { //发送回复评论的子评论,此时为子节点
        console.log(this.repModal);
        this.repShow = false;
        //1 设置参数
        this.comment.userId = this.repModal.userId;
        this.comment.articleId = this.repModal.dyId;
        this.comment.parentCommentId = this.repModal.comId;
        this.comment.content = this.repModal.replyInfo;

        //2 发送请求
        this.addComment();
      },
      tz(id, toid) {
        uni.navigateTo({
          // '/pages/bookDetail/bookDetail?id='
          // console.log(detail),
          url: "/pages/chat/chat?id="+id+"&"+"toid="+toid,
        })
      },
      // 评论消息
      comContent(id) {
        console.log('评论消息' + id);
        this.comModal.comId = id;
        this.comModal.dyId = this.articleId;
        this.comShow = true
      },
      // 回复消息
      replyContent(id) {
        console.log('回复消息' + id);
        this.repModal.comId = id;
        this.repModal.dyId = this.articleId;
        this.repShow = true
      },
      addComment() { // 发送评论请求
        this.comment.userId = uni.getStorageSync('loginUser').id;
        uni.request({
          url: 'http://127.0.0.1:800/mhs/comment/addComment',
          method: 'POST',
          header: {
            'token': uni.getStorageSync('token') //携带token
          },
          data: this.comment,
          success: (res) => {
            if (res.data.code == 1) {
              //刷新页面
              this.getComments();
              uni.showToast({
                title: '评论成功',
                icon: 'success', //如果要纯文本，不要icon，将值设为'none'
                duration: 2000 //持续时间为 2秒
              })
            } else {
              if (res.data.code == 401) {
                uni.showModal({
                  title: 'token已过期,请重新登陆',
                  content: '即将跳转登陆页',
                  success: function(res) {
                    if (res.confirm) {
                      uni.reLaunch({
                        url: '../login/login'
                      });
                    } else if (res.cancel) {
                      console.log('用户点击取消');
                    }
                  }
                });
              } else {
                uni.showToast({
                  title: '系统繁忙,请稍后再试',
                  icon: 'none', //如果要纯文本，不要icon，将值设为'none'
                  duration: 4000 //持续时间为 2秒
                })
              }
            }
          }
        })
      },
      comLikes(id) { // 点赞
        if (this.dyInfo.fabulous) {
          uni.showToast({
            title: `不能重复点赞哦~`,
            icon: 'none', //如果要纯文本，不要icon，将值设为'none'
            duration: 2000 //持续时间为 2秒
          })
          return
        }
        //发送点赞请求
        uni.request({
          url: 'http://127.0.0.1:800/mhs/article/pick?articleId=' + id,
          method: 'GET',
          header: {
            'token': uni.getStorageSync('token') //携带token
          },
          success: (res) => {
            if (res.data.code == 1) {
              this.dyInfo.fabulous = true
              this.dyInfo.dyLike = this.dyInfo.dyLike + 1 //就不需要再去查一次了
              uni.showToast({
                title: `点赞成功~`,
                icon: 'none', //如果要纯文本，不要icon，将值设为'none'
                duration: 2000 //持续时间为 2秒
              })
            } else {
              if (res.data.code == 401) {
                uni.showModal({
                  title: 'token已过期,请重新登陆',
                  content: '即将跳转登陆页',
                  success: function(res) {
                    if (res.confirm) {
                      uni.reLaunch({
                        url: '../login/login'
                      });
                    } else if (res.cancel) {
                      console.log('用户点击取消');
                    }
                  }
                });
              } else {
                uni.showToast({
                  title: '系统繁忙,请稍后再试',
                  icon: 'none', //如果要纯文本，不要icon，将值设为'none'
                  duration: 4000 //持续时间为 2秒
                })
              }
            }
          }
        })
      },
      replyLike(index) {
        if (this.dyInfo.comList[index].fabulous) {
          this.$u.toast(`不能重复点赞哦~`);
          return
        }
        this.dyInfo.comList[index].fabulous = true
        this.dyInfo.comList[index].comLike = this.dyInfo.comList[index].comLike + 1
        this.$u.toast(`点赞成功~`);
      },
      // 删除评论
      delCom(comId) {
        this.$u.toast(`删除成功~`);
      },
      previewImage(url, urls) {
        uni.previewImage({
          current: url, // 当前显示图片的http链接
          urls: urls // 需要预览的图片http链接列表
        });
      },
      getArticle() {
        uni.request({
          url: 'http://127.0.0.1:800/mhs/article/getArticleById?articleId=' + this.articleId,
          method: 'GET',
          header: {
            'token': uni.getStorageSync('token') //携带token
          },
          success: (res) => {
            if (res.data.code == 1) {
              this.article = res.data.data;
              console.log(this.article);
              this.dyInfo.id = this.article.id;
              this.dyInfo.avatarUrl = this.article.avatar // 用户头像 
              this.dyInfo.userName = this.article.nickName // 用户昵称
              this.dyInfo.content = this.article.content;
              this.dyInfo.dyImgs = this.article.imgs;
              this.dyInfo.pushTime = this.article.createTime;
              this.dyInfo.dyLike = this.article.pick;
              this.dyInfo.pushTime = this.article.createTime;
              this.dyInfo.commentCount = this.article.commentCount;
              this.dyInfo.userId = this.article.userId;
            } else {
              if (res.data.code == 401) {
                uni.showModal({
                  title: 'token已过期,请重新登陆',
                  content: '即将跳转登陆页',
                  success: function(res) {
                    if (res.confirm) {
                      uni.reLaunch({
                        url: '../login/login'
                      });
                    } else if (res.cancel) {
                      console.log('用户点击取消');
                    }
                  }
                });
              } else {
                uni.showToast({
                  title: '系统繁忙,请稍后再试',
                  icon: 'none', //如果要纯文本，不要icon，将值设为'none'
                  duration: 4000 //持续时间为 2秒
                })
              }
            }
          }
        })
      },
      getComments() {
        uni.request({
          url: 'http://127.0.0.1:800/mhs/comment/getComments?articleId=' + this.articleId,
          method: 'GET',
          header: {
            'token': uni.getStorageSync('token') //携带token
          },
          success: (res) => {
            if (res.data.code == 1) {
              this.comments = res.data.data;
              console.log(this.comments);
              this.dyInfo.comList = this.comments;
              this.dyInfo.comNum = this.comments.length;
              //加载完毕
              this.loading = false;
            } else {

            }
          }
        })
      }

    }

  }
</script>

<style lang="scss" scoped>
  .warp {
    background-color: #FFFFFF;
    margin-bottom: 100px;
  }
  


  .fenge {
    padding: 10px;
    height: 10vw;
    width: 100vw;
    display: flex;
    justify-content: space-between;
  }
  
  .commentIcon{
    width: 20vw;
    height: 8vw;
    // float: left;
    mode : 'scaleToFill';
  }

  .load_more {
    margin-top: 100px;
  }

  .bodys {
    padding: 20px;

  }

  .cardZw {
    margin: 10px 0px;
  }

  .slot-btn {
    width: 200rpx;
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(244, 245, 246);
    border-radius: 10rpx;

    image {
      width: 60px;
      height: 60px;
    }
  }

  .slot-btn__hover {
    background-color: rgb(235, 236, 238);
  }

  .info_iput {
    padding: 20px;
    font-weight: 600;

  }

  .u-input--border {
    border-radius: 30rpx !important;
    border: 2px solid #000000 !important;
  }

  .u-form-item {
    padding: 10rpx 0 !important;
  }
</style>